<template>
  <div class="page">
    <van-nav-bar left-arrow @click-left="onClickBack" class="my-nav-bar" />
    <div class="title">
      <van-image :src="require('@/assets/images/meetingManage/meetingSetBg.png')" alt="" width="100px" />
      <div class="title-content">
        <span class="title1">会议室设置</span>
        <span class="title2">提升会议效率30%的秘诀!</span>
      </div>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refreshList">
      <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
        <div class="list">
          <div class="list-item" v-for="item in list" :key="item.id">

            <div class="list-item-title">
              <span>{{ item.roomName }}</span>
              <van-image :src="require('@/assets/images/meetingManage/Edit.png')" alt="" width="20px"
                @click="handleGoEdite(item)" />
            </div>
            <van-divider />
            <div class="list-item-content">
              <div>
                <span class="list-item-content-label">可容纳人数：</span><span class="list-item-content-value">{{
                  item.roomSeatNum
                }}</span>
              </div>
              <div>
                <span class="list-item-content-label">地点：</span><span class="list-item-content-value">{{ item.roomAddr
                }}</span>
              </div>
              <div>
                <span class="list-item-content-label">序号权重：</span><span class="list-item-content-value">{{
                  item.roomLevel
                }}</span>
              </div>

            </div>
          </div>
        </div>
      </van-list>
      <van-empty description="暂无数据" v-if="!list.length" />
    </van-pull-refresh>

    <van-image :src="require('@/assets/images/meetingManage/add.png')" alt="" width="60px" class="add-meeting"
      @click="handleGoEdite()" />
  </div>
</template>
<script>
import Vue from "vue";
import { Axios } from "@/utils/Axios";
import { Image, Divider, Toast } from "vant";

Vue.use(Toast);
Vue.use(Divider);
Vue.use(Image);

export default {
  name: "meetingSet",

  data() {
    return {
      finishedText: "",
      error: false,
      loading: false,
      finished: false,
      refreshing: false,
      list: [],
      pageNum: 1
    }
  },

  methods: {
    onLoad() {
      // debugger
      console.log("onLoad", this.isLoadAll, this.refreshing);
      if (this.refreshing) {
        this.list = [];
        this.pageNum = 1;
        this.refreshing = false;
        this.isLoadAll = false;
      }

      Axios({
        url: `/meetingDetail/list?column=createTime&order=desc&pageNo=${this.pageNum}&pageSize=20`,
        method: "get",
      }).catch(() => {
        this.error = true;
      }).then((res) => {
        console.log(res);
        this.pageNum = res.current + 1;

        this.list = [...this.list, ...res.records];
        if (this.list.length === res.total) {
          this.finished = true
          if (this.list.length) {
            this.finishedText = "没有更多了"
          }
        }

      }).finally(() => {
        this.loading = false;
      });
    },
    onClickBack() {
      this.$router.push("/meetingManage");
    },
    handleGoEdite(item) {
      this.$router.push({
        name: "meetingSetEdit",
        params: item
      })
    },
    onRefresh() {
      // // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  }
}
</script>
<style scoped lang="less">
.page {
  position: relative;
  background: linear-gradient(to top right, #edf7ff87, #d8ebfc75, #b4d2fa);
  padding-top: 0;

  .add-meeting {
    position: fixed;
    top: 40%;
    right: 10px;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: -45px;

    .title-content {
      display: flex;
      flex-direction: column;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-style: normal;

      .title1 {
        font-size: 20px;
        color: #2C70F4;
      }

      .title2 {
        font-size: 14px;
        color: #445D79;
      }
    }
  }

  .refreshList {
    height: calc(100% - 121px);
    overflow: auto;
    padding: 0 15px 15px;

    .list {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .list-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        padding: 15px;
        border-radius: 10px;
        font-family: PingFangSC, PingFang SC;
        box-sizing: border-box;
        background: #FFFFFF;
        box-shadow: -4px 2px 0px 1.3px rgb(150 180 255 / 10%);

        .list-item-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          color: #0B0B0B;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
        }

        .list-item-content {
          display: flex;
          flex-direction: column;
          gap: 5px;

          .list-item-content-label {
            display: inline-block;
            width: 100px;
            color: #727B9C;
            text-align: left;
          }

          .list-item-content-value {
            color: #01124D;
            font-weight: 500;
          }
        }


        //  ::deep .van-cell-group--inset{
        //   margin: 0 10px;
        //   }
      }
    }
  }



}
</style>